<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="4">
        <div class="part">
          <div class="piece piece1 light-background">
            <div class="title">
              <div class="time">
                <span class="time-title">本月消费金额 (元)</span>
                <span class="time-day">本月</span>
              </div>
              <div class="num color-FA545E">123</div>
              <div class="yes">
                <div>上月</div>
                <div>123</div>
              </div>
              <div class="link">
                <div>环比上月</div>
                <div class="background-4EC99B">10%</div>
                <!-- <div class="background-FA545E">10%</div> -->

              </div>
            </div>
            <!-- <div id="chart1" class="chart" _echarts_instance_="ec_1659082939005"
            style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">

          </div> -->
          </div>
        </div>

      </el-col>
      <el-col :sm="24" :lg="4">
        <div class="part">
          <div class="piece piece1 light-background">
            <div class="title">
              <div class="time">
                <span class="time-title">充电金额 (元)</span>
                <span class="time-day">今日</span>
              </div>
              <div class="num color-FF9F0A">123</div>
              <div class="yes">
                <div>昨日</div>
                <div>123</div>
              </div>
              <div class="link">
                <div>环比前日</div>
                <div class="background-4EC99B">10%</div>
                <!-- <div class="background-FA545E">10%</div> -->

              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="4">
        <div class="part">
          <div class="piece piece1 light-background">
            <div class="title">
              <div class="time">
                <span class="time-title">服务费金额 (元)</span>
                <span class="time-day">今日</span>
              </div>
              <div class="num color-5278E2">0</div>
              <div class="yes">
                <div>昨日</div>
                <div>123</div>
              </div>
              <div class="link">
                <div>环比前日</div>
                <div class="background-4EC99B">10%</div>
                <!-- <div class="background-FA545E">10%</div> -->

              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="4">
        <div class="part">
          <div class="piece piece1 light-background">
            <div class="title">
              <div class="time">
                <span class="time-title">充电电量 (度)</span>
                <span class="time-day">今日</span>
              </div>
              <div class="num color-AA49D1">0</div>
              <div class="yes">
                <div>昨日</div>
                <div>123</div>
              </div>
              <div class="link">
                <div>环比前日</div>
                <div class="background-4EC99B">10%</div>
                <!-- <div class="background-FA545E">10%</div> -->

              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="4">
        <div class="part">
          <div class="piece piece1 light-background">
            <div class="title">
              <div class="time">
                <span class="time-title">充电电费 (元) </span>
                <span class="time-day">今日</span>
              </div>
              <div class="num color-09B59D">0</div>
              <div class="yes">
                <div>昨日</div>
                <div>0</div>
              </div>
              <div class="link">
                <div>环比前日</div>
                <div class="background-4EC99B">10%</div>
                <!-- <div class="background-FA545E">10%</div> -->

              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="4">
        <div class="part">
          <div class="piece piece1 light-background">
            <div class="title">
              <div class="time">
                <span class="time-title">充电用户数 (个) </span>
                <span class="time-day">今日</span>
              </div>
              <div class="num color-5278E2">0</div>
              <div class="yes">
                <div>昨日</div>
                <div>0</div>
              </div>
              <div class="link">
                <div>环比前日</div>
                <div class="background-4EC99B">10%</div>
                <!-- <div class="background-FA545E">10%</div> -->

              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mb-card">
      <el-col :sm="24" :lg="4">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>待办事项</span>
            </div>
          </template>
          <div class="to-do">
            <div class="item">
              <div class="con">退款申请</div>
              <div class="num">0</div>
            </div>
            <div class="item">
              <div class="con">发票申请</div>
              <div class="num">0</div>
            </div>
            <div class="item">
              <div class="con">充电中</div>
              <div class="num">0</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="16">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="status-header">
              <div>设备状态</div>
              <div> 场站数量 2 个</div>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :sm="24" :lg="12">
              <div class="echarts-pie">
                <div ref="pieZhiliu" class="pie-box" />
                <div class="detail-box">
                  <div class="tit-box">
                    <span class="tit-text">直流充电口</span>
                    <span class="tit-num">48</span>
                  </div>
                  <div>
                    <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
                    <span class="num-text">空闲充电口</span>
                    <span class="num-con">45</span>

                  </div>
                  <div>
                    <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
                    <span class="num-text">使用充电口</span>
                    <span class="num-con">45</span>
                  </div>
                  <div>
                    <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
                    <span class="num-text">异常充电口</span>
                    <span class="num-con">45</span>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :sm="24" :lg="12">
              <div class="echarts-pie">
                <div ref="pieJiaoliu" class="pie-box" />
                <div class="detail-box">
                  <div class="tit-box">
                    <span class="tit-text">交流充电口</span>
                    <span class="tit-num">48</span>
                  </div>
                  <div>
                    <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
                    <span class="num-text">空闲充电口</span>
                    <span class="num-con">45</span>

                  </div>
                  <div>
                    <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
                    <span class="num-text">使用充电口</span>
                    <span class="num-con">45</span>
                  </div>
                  <div>
                    <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
                    <span class="num-text">异常充电口</span>
                    <span class="num-con">45</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="4">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>联系我们</span>
            </div>
          </template>

        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="19" :lg="19">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>营收趋势</span>
            </div>
          </template>
          <div>
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="最近7日" name="7">
                <div ref="revenueChart1" class="revenue-box" />
              </el-tab-pane>
              <el-tab-pane label="最近30日" name="30">
                <div ref="revenueChart2" class="revenue-box" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="5" :lg="5">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="header-box">
              <span>昨日用户排行</span>
              <el-switch v-model="showType" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
                active-text="金额" inactive-text="电量" />
            </div>
          </template>
          <div class="rankList">
            <div class="rankList-piece" v-for="o in 10" :key="o">
              <div class="rankList-icon" :class="[o <= 3 ? 'rank_' + o : '']">{{ o
                }}
              </div>
              <div class="rankList-text" style="width: 0px;">快电</div>
              <div class="rankList-num">53.64<span>元</span>
              </div>
            </div>

          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts';
const activeName = ref('7')
const handleClick = (tab, event) => {
  console.log(tab, event)
}
const showType = ref(true);
const pieZhiliu = ref(null);
const pieJiaoliu = ref(null);
const revenueChart1 = ref(null);
const revenueChart2 = ref(null);
let option_zhiliu = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    top: '4%',
    left: 'center',
    show: false
  },
  color: ["#09b59d", "#ff9f0a", "#fa545e"],
  title: {
    text: "直流",
    left: "center",
    top: "40%",
    textStyle: {
      color: "#ff9f0a",
      fontSize: 25,
      align: "center"
    }
  }
  ,

  series: [
    {
      name: '直流充电口',
      type: 'pie',
      radius: ['65%', '80%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#ff9f0a',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1, name: '空闲' },
        { value: 2, name: '充电' },
        { value: 3, name: '异常' }
      ]
    }
  ]
};
let option_jiaoliu = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    top: '5%',
    left: 'center',
    show: false
  },
  color: ["#09b59d", "#ff9f0a", "#fa545e"],
  title: {
    text: "交流",
    left: "center",
    top: "40%",
    textStyle: {
      color: "#ff9f0a",
      fontSize: 25,
      align: "center"
    }
  }
  ,

  series: [
    {
      name: '交流充电口',
      type: 'pie',
      radius: ['65%', '80%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#ff9f0a',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1, name: '空闲' },
        { value: 2, name: '充电' },
        { value: 3, name: '异常' }
      ]
    }
  ]
};

let default_temps = [1, 2, 3, 4, 5, 6, 7];
let option_7days = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['优惠金额', '服务费金额', '电费金额', '充电金额', '充电电量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2024-3-11', '2024-3-12', '2024-3-13', '2024-3-14', '2024-3-15', '2024-3-16', '2024-3-17']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '优惠金额',
      type: 'line',
      stack: 'Total',
      data: default_temps
    },
    {
      name: '服务费金额',
      type: 'line',
      stack: 'Total',
      data: default_temps
    },
    {
      name: '电费金额',
      type: 'line',
      stack: 'Total',
      data: default_temps
    },

    {
      name: '充电金额',
      type: 'line',
      stack: 'Total',
      data: default_temps
    },

    {
      name: '充电电量',
      type: 'line',
      stack: 'Total',
      data: default_temps
    }
  ]
};

onMounted(() => {
  const pieZhiliuIntance = echarts.init(pieZhiliu.value, "walden");
  pieZhiliuIntance.setOption(option_zhiliu);
  const pieJiaoliuIntance = echarts.init(pieJiaoliu.value, "walden");
  pieJiaoliuIntance.setOption(option_jiaoliu);
  const echartsRecords = echarts.init(revenueChart1.value, 'walden');
  echartsRecords.setOption(option_7days);
  window.addEventListener("resize", function () {
    pieZhiliuIntance.resize();
    pieJiaoliuIntance.resize();
    echartsRecords.resize();
  });
})


const version = ref('3.8.7')

function goTarget(url) {
  window.open(url, '__blank')
}
</script>

<style scoped lang="scss">
.home {
  background-color: #f2f2f2;
}

.light-background {
  background: #fff
}

.dark-background {
  background: #000
}

.part {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
  margin-bottom: 20px;
  height: 176px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.part .piece {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 6px;
  -webkit-box-shadow: 4px 0 12px 0 rgba(30, 30, 30, .05);
  box-shadow: 4px 0 12px 0 rgba(30, 30, 30, .05)
}

.part .piece2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 20px;
  -webkit-box-flex: 0;
  -ms-flex: 0 60%;
  flex: 0 60%
}

.part .piece2 .piece3 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 6px
}

.part .piece2 .piece4 {
  margin: 0 20px
}

.part .title {
  text-align: left;
  height: 150px;
  border-radius: 6px;
  padding: 0 16px;
  border: 1px solid #fff
}

.color-FA545E {
  color: #fa545e
}

.color-FF9F0A {
  color: #ff9f0a
}

.color-5278E2 {
  color: #5278e2
}

.color-AA49D1 {
  color: #aa49d1
}

.color-09B59D {
  color: #09b59d
}

.background-FA545E {
  color: #fa545e;
  background: #ffeeef
}

.background-4EC99B {
  color: #4ec99b;
  background: #dff5ea
}

.part .title .time {
  margin-top: 20px;
  height: 22px;
  line-height: 22px
}

.part .title .time .time-title {
  font-size: 16px;
  color: #8087a0;
  font-weight: 600
}

.part .title .time .time-day {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: #8087a0
}

.part .num {
  margin-top: 14px;
  height: 41px;
  font-size: 34px;
  font-weight: 700;
  line-height: 41px
}

.part .link,
.part .text-num,
.part .yes {
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #8087a0;
  line-height: 17px
}

.part .yes {
  margin-top: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.part .yes div:first-child {
  width: 80px
}

.part .yes div:nth-child(2) {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-indent: 0
}

.part .link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 6px
}

.part .link div:first-child {
  width: 80px
}

.part .link div:nth-child(2) {
  text-indent: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  height: 20px;
  border-radius: 4px;
  padding: 0 5px
}

.part .chart {
  height: 72px
}

.to-do {
  height: 158px;
}

.to-do .item {
  display: flex;
  cursor: pointer;
  display: flex;
  margin-top: 10px;
  height: 32px;
  line-height: 32px;
  background: #eff2f6;
  border-radius: 4px;
  font-size: 14px;

  &:hover {
    background: #e7f0ff;
  }

  .con {
    flex: 1;
    font-weight: 400;
    color: #1c2237;
    text-align: left;
    text-indent: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &:hover {
      color: #5278e2;
    }
  }

  .num {
    margin: 7px 10px 0 0;
    width: 32px;
    border-radius: 10px;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background: #d2d5dd;
  }
}

.echarts-pie {
  display: flex;
}

.pie-box {
  width: 180px;
  height: 160px;
}

.mb-card {
  margin-bottom: 20px;
}

.detail-box {
  padding-top: 40px;

  .tit-text {
    font-size: 14px;
    font-weight: 400;
    margin-left: 4px;
    color: #1c2237;
  }

  .tit-num {
    margin-left: 10px;
  }

  .num-text {
    width: 80px;
    font-size: 12px;
    font-weight: 400;
    color: #8087a0;
    margin-left: 4px;
    display: inline-block;
  }

  .num-con {
    font-size: 20px;
    font-weight: 700;
    color: #1f253a;
    cursor: pointer;
  }

  >div {
    margin-bottom: 10px;
  }
}

.status-header {
  display: flex;
  justify-content: space-between;
}

.revenue-box {
  height: 315px;
}

.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  :deep(.el-switch) {
    height: auto;
  }

}

.rankList .rankList-piece {
  margin-top: 7px;
  display: -webkit-box;
  display: flex;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #1c2237;
}

.rankList .rankList-piece .rankList-icon {
  margin: 5px 10px 0;
  width: 20px;
  height: 20px;
  line-height: 15px;
  border-radius: 20px;
  text-align: center;
  background: #f5f6f9;
  border: 4px solid #f5f6f9;
  font-size: 12px;
  font-weight: 600;
  color: #8087a0;

  &.rank_1 {
    background: rgb(255, 179, 0);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(255, 215, 79);
  }

  &.rank_2 {
    background: rgb(178, 201, 218);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(216, 227, 235);
  }

  &.rank_3 {
    background: rgb(211, 172, 107);
    color: rgb(255, 255, 255);
    border: 3px solid rgb(240, 199, 137);
  }
}

.rankList .rankList-piece .rankList-text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rankList .rankList-piece .rankList-num {
  width: 80px;
  text-align: right;
}
</style>
